/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  safelist: [
    // 动态生成的类名添加到safelist确保它们被包含
    'bg-accent-primary',
    'bg-brand-red',
    'bg-brand-red-dark',
    'text-accent-primary',
    'text-brand-red',
    'hover:bg-brand-red-dark',
    'hover:text-accent-primary',
    'shadow-card',
    'shadow-card-hover',
    // 给所有屏幕尺寸添加动态类名
    {
      pattern: /grid-cols-(2|3|4|5|6)/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
      pattern: /gap-(2|3|4|5|6)/,
      variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // 暗黑主题基础色
        background: {
          DEFAULT: 'var(--background)',
          darker: '#080c14',
          dark: '#11151d',
          card: '#19202c',
          hover: '#232c3d',
        },
        foreground: {
          DEFAULT: 'var(--foreground)',
          muted: '#bfc3cc',
          subtle: '#8c92a3',
        },
        // 品牌色
        brand: {
          red: {
            DEFAULT: '#ff5f57',
            dark: '#e13c39',
            light: '#ff8a84',
          },
          gradient: {
            start: '#ff5f57',
            end: '#ff8a84',
          },
        },
        // 功能色
        accent: {
          primary: '#ff5f57',
          secondary: '#ffbb2c',
        },
      },
      fontFamily: {
        sans: ['var(--font-inter)', 'Arial', 'sans-serif'],
        pingfang: ['var(--font-pingfang)'],
      },
      borderRadius: {
        'xs': '2px',
        'sm': '4px',
        'DEFAULT': '6px',
        'md': '8px',
        'lg': '12px',
        'xl': '16px',
      },
      spacing: {
        '4.5': '1.125rem',
        '13': '3.25rem',
        '18': '4.5rem',
      },
      maxWidth: {
        'screen-2xl': '1536px',
      },
      minHeight: {
        'screen-minus-header': 'calc(100vh - 4rem)',
      },
      boxShadow: {
        'card': '0 4px 12px rgba(0, 0, 0, 0.15)',
        'card-hover': '0 8px 20px rgba(0, 0, 0, 0.2)',
        'btn': '0 2px 4px rgba(0, 0, 0, 0.2)',
        'nav': '0 2px 8px rgba(0, 0, 0, 0.15)',
      },
      animation: {
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'fade-in-up': 'fadeInUp 0.4s ease-out',
        'scale-in': 'scaleIn 0.2s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 },
        },
        fadeInUp: {
          '0%': { opacity: 0, transform: 'translateY(20px)' },
          '100%': { opacity: 1, transform: 'translateY(0)' },
        },
        scaleIn: {
          '0%': { opacity: 0, transform: 'scale(0.95)' },
          '100%': { opacity: 1, transform: 'scale(1)' },
        },
      },
      transitionProperty: {
        'height': 'height',
        'spacing': 'margin, padding',
      },
      screens: {
        'xs': '420px',
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      },
    },
  },
  plugins: [
    function({ addUtilities }) {
      const newUtilities = {
        '.no-scrollbar': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
        '.text-shadow': {
          'text-shadow': '0 2px 4px rgba(0, 0, 0, 0.5)',
        },
        '.text-shadow-sm': {
          'text-shadow': '0 1px 2px rgba(0, 0, 0, 0.4)',
        },
        '.backdrop-blur-xs': {
          'backdrop-filter': 'blur(2px)',
        },
      };

      addUtilities(newUtilities);
    },
  ],
} 